<template>
	<a-config-provider :locale="locale" :theme="$settingStore.themeOverrides">
		<a-app>
			<router-view v-slot="{ Component }">
				<transition enter-active-class="enterAnimation" leave-active-class="leaveAnimation">
					<keep-alive include="" :max="20">
						<component :is="Component" />
					</keep-alive>
				</transition>
			</router-view>
		</a-app>
	</a-config-provider>
</template>

<script setup>
	import { onMounted, onUnmounted } from 'vue';
	import zhCN from 'ant-design-vue/es/locale/zh_CN';
	import dayjs from 'dayjs';
	import 'dayjs/locale/zh-cn';
	dayjs.locale('zh-cn');
	
	import {settingStore} from '@/stores/setting';
	const $settingStore = settingStore();
	
	const locale = zhCN;
	
	onMounted(()=> {
		console.log('-> app onMounted init' + JSON.stringify($settingStore.themeOverrides)  );
	})
	
	onUnmounted(()=>{
		console.log('-> app onUnmounted destory');
	})
</script>

<style scoped>
	.leaveAnimation {
	  animation: slideOutLeft 0.5s;
	}
	.enterAnimation {
	  animation: fadeIn 0.5s;
	}
</style>
